<template>
  <el-container class="container">
    <!--
      布局：
      1. header 在顶部
      2. footer 在底部
      3. 中间 main 铺满

      开发者要做的事情是，把容器撑开
    -->
    <el-header class="header">
      <LoginHeader></LoginHeader>
    </el-header>
    <el-main class="main">
      <LoginMain></LoginMain>
    </el-main>
    <el-footer class="footer">
      <LoginFooter></LoginFooter>
    </el-footer>
  </el-container>
</template>

<script>

import LoginHeader from '../components/LoginHeader.vue'
import LoginFooter from '../components/LoginFooter.vue'
import LoginMain from '../components/LoginMain.vue'

export default {
  components: {
    LoginHeader,
    LoginFooter,
    LoginMain,
  }
}
</script>
<style scoped>
.container {
  height: 100vh;
}
.main {
  border-top: 1px solid var(--el-border-color);
}
.header,
.footer {
  /* 覆盖默认高度 */
  height: unset;
  /* height: auto; */
}
.footer {
  border-top: 1px solid var(--el-border-color);
}
</style>